<html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<body>
    <div id="todo-list-example">
        <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
        <ul>
            <li is="todo-item" v-for="(todo, index) in todos" v-bind:title="todo" v-on:remove="todos.splice(index, 1)"></li>
        </ul>
    </div>

    <div id="example">
        <my-component></my-component>
        <another-component></another-component>
    </div>

    <script>
        // 注册
        Vue.component('my-component', {
            template: '<div>A custom component!</div>'
        })
        Vue.component('another-component', {
            template: '<div>another component!</div>'
        })
        // 创建根实例
        new Vue({
            el: '#example'
        })

        Vue.component('todo-item', {
            template: `
                    <li>
                    {{ title }}
                    <button v-on:click="$emit('remove')">X</button>
                    </li>
                `,
            props: ['title']
        })
        new Vue({
            el: '#todo-list-example',
            data: {
                newTodoText: '',
                todos: [
                    'Do the dishes',
                    'Take out the trash',
                    'Mow the lawn'
                ]
            },
            methods: {
                addNewTodo: function () {
                    this.todos.push(this.newTodoText)
                    this.newTodoText = ''
                }
            }
        })
    </script>
</body>

</html>